import React, { PureComponent } from 'react';
import { Drawer, Tooltip, Divider, Button, Switch } from 'antd';
import {
  CheckOutlined,
  CloseOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import tableIcon1 from './tableIcon1.png';
import tableIcon2 from './tableIcon2.png';
import tableIcon3 from './tableIcon3.png';
import tableIcon4 from './tableIcon4.png';
import './index.less';
import SettingContext from '../context';

class LayoutSetting extends PureComponent {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }

  drawerOnswitch = () => {
    const { state } = this;
    const visible = !!state.visible;
    this.setState({
      visible: !visible,
    });
  };

  drawerOnClose = () => {
    this.setState({
      visible: false,
    });
  };

  onChange = async (target, code) => {
    const { updateLayoutSettingState } = this.context;
    if (target === 'primaryColor') {
      await window.less
        .modifyVars({ '@primary-color': code })
        .catch((error) => {
          // eslint-disable-next-line
          console.log(error);
        });
    }
    updateLayoutSettingState({
      [target]: code,
    });
  };

  renderRow = ({ title, list, code, itemClick, target, render }) => {
    const { primaryColor } = this.context;
    return (
      <div style={{ marginBottom: 24 }}>
        <h3 className="title">{title}</h3>
        {render ? (
          render()
        ) : (
          <div className="row">
            {list.map((item) => {
              return (
                <Tooltip title={item.title} key={item.code}>
                  <div
                    className="styleItem"
                    onClick={itemClick.bind(null, target, item.code)}
                  >
                    <img
                      alt={item.title}
                      className="styleItemImg"
                      src={item.imgSrc}
                    />
                    {code === item.code && (
                      <div className="styleItemIcon">
                        <CheckOutlined style={{ color: primaryColor }} />
                      </div>
                    )}
                  </div>
                </Tooltip>
              );
            })}
          </div>
        )}
      </div>
    );
  };

  render() {
    const { state } = this;
    // const { settings } = this.props;
    const settings = this.context;
    const { navTheme, primaryColor, tableLayout, layout } = settings;

    const navThemeList = [
      {
        title: '暗色菜单风格',
        code: 'dark',
        imgSrc:
          'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
      },
      {
        title: '亮色菜单风格',
        code: 'light',
        imgSrc:
          'https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg',
      },
      // {
      //   title: '暗夜风格',
      //   code: 'realDark',
      //   imgSrc: 'https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg',
      // },
    ];
    const themeColorList = [
      { title: '拂晓蓝（默认）', color: 'rgb(24,144,255)' },
      { title: '薄暮', color: 'rgb(245,34,45)' },
      { title: '火山', color: 'rgb(250,84,28)' },
      { title: '日暮', color: 'rgb(250,173,20)' },
      { title: '明青', color: 'rgb(19,194,194)' },
      { title: '极光绿', color: 'rgb(82,196,26)' },
      { title: '极客蓝', color: 'rgb(47,84,235)' },
      { title: '酱紫', color: 'rgb(114,46,209)' },
    ];
    const siderList = [
      {
        title: '侧边菜单布局',
        code: 'sidemenu',
        imgSrc:
          'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
      },
      {
        title: '顶部菜单布局',
        code: 'topmenu',
        imgSrc:
          'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg',
      },
    ];
    const tableList = [
      { title: '普通表格', code: 'normal', imgSrc: tableIcon1 },
      { title: '斑马纹模式', code: 'zebra', imgSrc: tableIcon2 },
      { title: '竖线模式', code: 'verticalLine', imgSrc: tableIcon3 },
      { title: '斑马纹+竖线', code: 'zebraVerticalLine', imgSrc: tableIcon4 },
    ];

    return (
      <Drawer
        placement="right"
        closable
        width={300}
        onClose={this.drawerOnClose}
        visible={state.visible}
        handler={
          <Button
            className="xuanyue-Drawer-switchBtn"
            style={{ borderRadius: '4px 0 0 4px' }}
            type="primary"
            icon={
              state.visible ? (
                <CloseOutlined style={{ color: '#fff', fontSize: 20 }} />
              ) : (
                <SettingOutlined style={{ color: '#fff', fontSize: 20 }} />
              )
            }
            onClick={this.drawerOnswitch}
          />
        }
      >
        <div className="xuanyue-Drawer">
          {this.renderRow({
            title: '整体风格设置',
            list: navThemeList,
            code: navTheme,
            itemClick: this.onChange,
            target: 'navTheme',
          })}
          <Divider />
          <div style={{ marginBottom: 24 }}>
            <h3 style={{ fontSize: 14, margin: 0, paddingBottom: 16 }}>
              主题色
            </h3>
            <div className="row">
              {themeColorList.map((item) => {
                return (
                  <Tooltip key={item.color} title={item.title}>
                    <div
                      className="colorItem"
                      style={{ background: `${item.color}` }}
                      onClick={this.onChange.bind(
                        this,
                        'primaryColor',
                        item.color,
                      )}
                    >
                      {primaryColor === item.color && (
                        <div
                          className="styleItemIcon"
                          style={{ width: 20, height: 20 }}
                        >
                          <CheckOutlined style={{ color: '#fff' }} />
                        </div>
                      )}
                    </div>
                  </Tooltip>
                );
              })}
            </div>
          </div>
          <Divider />
          {this.renderRow({
            title: '导航模式',
            list: siderList,
            code: layout,
            itemClick: this.onChange,
            target: 'layout',
          })}
          <Divider />
          {this.renderRow({
            title: '表格模式',
            list: tableList,
            code: tableLayout,
            itemClick: this.onChange,
            target: 'tableLayout',
          })}
          <Divider />
          {this.renderRow({
            title: '表格模式',
            render: () => {
              return (
                <div
                  style={{ display: 'flex', justifyContent: 'space-between' }}
                >
                  <div>多工作台</div>
                  <div>
                    <Switch
                      size="small"
                      onChange={(e) => {
                        this.onChange('mutilModel', e);
                      }}
                      checked={settings.mutilModel}
                    />
                  </div>
                </div>
              );
            },
          })}
        </div>
      </Drawer>
    );
  }
}
// 和settingProvider.js 相呼应
LayoutSetting.contextType = SettingContext;

export default LayoutSetting;
